<template>
	<div class="card-container">
		<div class="card-layout">
			<div class="card-top-view">{{chartTitle}}</div>
			<div :id="randomId" class="line-chart"></div>
		</div>
	</div>
</template>

<script src="./indexJs.js"></script>

<style scoped>
	.card-container {
		width: 100%;
		margin-top: 15px;
	}

	.card-layout {
		width: 345px;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		border-radius: 6px;
		padding-bottom: 20px;
	}

	.card-top-view {
		padding: 17px;
		padding-bottom: 0px;
		font-size: 21px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(64, 65, 68, 1);
		line-height: 29px;
	}

	.line-chart {
		width: 345px;
		height: 300px;
	}
</style>
